<template>
  <div class="store-search-main">
    <div class="search-wrap clear">
        <div class="searchbar clear fl">
          <img src="../assets/image/ico_seach@2x.png" class="search-icon fl"/>
          <input type="text" :placeholder="searchText" class="search-text fl">
        </div>
        <p class="cancel fr">取消</p>
    </div>
    <div class="search-history">
      <header>搜索历史</header>
      <div class="search-list clear">
        <img src="../assets/image/ioc_history@2x.png" class="history-icon fl"/>
        <p class="fl">小白鞋</p>
        <img src="../assets/image/ioc_remove@2x.png" class="close-icon fr"/>
      </div>
      <div class="search-list clear">
        <img src="../assets/image/ioc_history@2x.png" class="history-icon fl"/>
        <p class="fl">小白鞋</p>
        <img src="../assets/image/ioc_remove@2x.png" class="close-icon fr"/>
      </div>
      <p class="clear-history">清空搜索历史</p>
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  export default {
    data () {return {
      searchText:'连衣裙',
    }},
    name: 'app',
    methods:{

    }
  }
</script>
<style lang="scss">
  .store-search-main{
    .search-wrap{
      padding:0.14rem 0.26rem 0.14rem 0.26rem; background:#fff; border-bottom: 1px solid #f4f5f5;
    }
    .searchbar{
      width:6.24rem; height:0.6rem; border-radius:29px; background:rgba(243,243,243,1);
      .search-icon{ display:block; width:0.28rem; height:0.28rem; padding:0.16rem 0.11rem 0 0.21rem;}
      .search-text{ display:block; width:4.5rem; height:0.22rem; margin-top:0.19rem; border:0; outline:none; font-size:0.22rem; line-height:0.22rem; color:#aaa; background:none;}
      ::-webkit-input-placeholder{color:#aaa; font-size: 0.22rem; line-height:0.22rem; text-align:left;}
    }
    .cancel{font-size: 0.28rem; line-height:0.6rem;  color: #ff365d;}
    .search-history{
      padding: 0.36rem 0 1.06rem 0.28rem; background:#fff;
      header{margin-bottom:0.36rem; font-size: 0.26rem; font-weight: bold; line-height: 0.26rem; color: #333;}
      .search-list{
        height:0.8rem; border-bottom:1px solid #f4f5f5;
        .history-icon{display: block; width: 0.3rem; height: 0.3rem; padding: 0.25rem 0.28rem 0.25rem 0.12rem;}
        .close-icon{display: block; width: 0.3rem; height: 0.3rem; padding: 0.25rem 0.7rem 0.25rem 0;}
        p{font-size: 0.26rem; line-height: 0.8rem; color: #666;}
      }
    }
    .clear-history{width: 100%; margin-top: 0.34rem; font-size: 0.26rem; font-weight: bold; text-align: center; line-height: 0.26rem; color: #333;}
  }
</style>
